<template>
  <div class="allnotes">
    <div class="writenotes">
      <div class="travelInfo">
        <div class="travelInfo1">
          <div
            style="
              margin-left: 30px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
            "
          >
            游记标题：
          </div>
          <el-input
            v-model="lgtravelnotes.notesTitle"
            placeholder="请输入内容"
            style="width: 230px"
          ></el-input>
          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
            "
          >
            游行类型：
          </div>
          <el-select
            v-model="lgtravelnotes.passScenicspot"
            placeholder="请选择游行类型"
            style="width: 230px"
          >
            <el-option
              v-for="(item, index) in optionstype"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
            "
          >
            旅行花费：
          </div>
          <el-input
            v-model="lgtravelnotes.travelCost"
            placeholder="请输入花费(单位/元)"
            style="width: 240px"
          ></el-input>
        </div>
        <div class="travelInfo2">
          <div
            style="
              margin-left: 30px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
            "
          >
            旅行日期：
          </div>
          <el-date-picker
            v-model="lgtravelnotes.travelDate"
            align="right"
            type="date"
            placeholder="请选择日期"
            style="width: 230px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>

          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
            "
          >
            旅行时长：
          </div>
          <el-input
            v-model="lgtravelnotes.travelTime"
            placeholder="请输入旅行时长"
            style="width: 230px"
          ></el-input>
        </div>
      </div>
      <el-upload
        style="display: none"
        class="quill-picture-uploader"
        action="string"
        :before-upload="beforeCoverUpload"
        :headers="myHeaders"
        :http-request="uploadImg"
      >
      </el-upload>

      <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
          v-model="lgtravelnotes.notesUrl"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <!-- <div v-html="str" class="ql-editor">
          {{ str }}
        </div> -->
      </div>
      <div class="publishTravelNote">
        <el-row>
          <el-button type="primary" @click="publishNote">发表游记</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { uploadImg } from "@/api/scenic";

import { addTravelNotes } from "@/api/travelnotes";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      optionstype: [
        {
          value: "骑行",
          label: "骑行",
        },
        {
          value: "潜水",
          label: "潜水",
        },
        {
          value: "徒步",
          label: "徒步",
        },
        {
          value: "登山",
          label: "登山",
        },
      ],

      imgUrl: "",
      input: "",
      str: "",
      lgtravelnotes: {
        notesId: "",
        notesUrl: "",
        notesTitle: "",
        passScenicspot: "",
        travelCost: "",
        travelDate: "",
        travelTime: "",
        createdBy: 1,
      },
      beforeCoverUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension =
          testmsg === "jpg" ||
          testmsg === "JPG" ||
          testmsg === "png" ||
          testmsg === "PNG";

        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!extension) {
          this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        }
        if (!isLt5M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
        }
        return extension || isLt5M;
      },
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              ["clean"], //清除字体样式
              ["image", "video"], //上传图片、上传视频
            ],
            handlers: {
              image: function (value) {
                console.log(value);
                //替换原图片上传功能
                if (value) {
                  document
                    .querySelector(".quill-picture-uploader input")
                    .click(); //核心
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    uploadImg(param) {
      const formdata = new FormData();
      // formdata.append("id", 1);
      formdata.append("file", param.file);
      uploadImg(formdata).then((res) => {
        let quill = this.$refs.myQuillEditor.quill;
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });

          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片
          quill.insertEmbed(length, "image", res.data);
          // 调整光标到最后
          quill.setSelection(length + 1);
        }
        console.log(res);
      });
    },
    publishNote() {
      addTravelNotes(this.lgtravelnotes).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        console.log(res);
      });
    },

    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(event) {
      console.log(this.$refs.myQuillEditor);
    }, // 内容改变事件

    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    let content = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  },
};
</script>

<style>
.ql-editor {
  height: 500px;
}
.writenotes {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 80%;
}
.travelInfo {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.edit_container {
  margin-top: 30px;
}
.allnotes {
  display: flex;
  justify-content: center;
}
.publishTravelNote {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.travelInfo1 {
  display: flex;
}
.travelInfo2 {
  display: flex;
  margin-top: 20px;
}
</style>
